<template>
  <div class="number-wrap flex">
    <el-input-number
      v-model="minVal"
      :min="min"
      :max="max"
      :controls="false"
      :precision="precision"
      @blur="handleCheckMin"
      :placeholder="placeholder"
      size="small"
    />
    <span class="flex items-center">{{ separate }}</span>
    <el-input-number
      v-model="maxVal"
      :min="min"
      :max="max"
      :controls="false"
      :precision="precision"
      @blur="handleCheckMax"
      :placeholder="placeholder"
      size="small"
    />
    <div class="suffix" v-if="suffix">{{ suffix }}</div>
  </div>
</template>
<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  precision: { type: Number, default: 0 },
  suffix: { type: String, default: "" },
  min: { type: Number, default: 0 },
  max: { type: Number, default: 9999999 },
  placeholder: { type: String, default: "" },
  separate: { type: String, default: "→" },
  checkValue: { type: Boolean, default: false },
});

const minVal = ref();
const maxVal = ref();

const emit = defineEmits(["input", "update:modelValue"]);

const handleCheckMin = () => {
  const { checkValue } = props;
  if (!checkValue) return;
  const val = minVal.value;
  if (!val) return;
  if (val > maxVal.value) {
    maxVal.value = val;
  }
};

const handleCheckMax = () => {
  const { checkValue } = props;
  if (!checkValue) return;
  const val = maxVal.value;
  if (!val) return;
  if (val < minVal.value) {
    minVal.value = val;
  }
};

watch([minVal, maxVal], () => {
  emit("update:modelValue", { min: minVal.value, max: maxVal.value });
  emit("input", { min: minVal.value, max: maxVal.value });
});

watch(
  () => props.modelValue,
  (val) => {
    minVal.value = val?.min || 0;
    maxVal.value = val?.max || 0;
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.number-wrap {
  border: 1px solid var(--base-border-color);
  border-radius: 4px;
  white-space: nowrap;
  background-color: var(--base-color);
  overflow: hidden;
  height: 32px;
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none;
  }
  .suffix {
    font-size: 14px;
    color: #3a4259;
    line-height: 20px;
    padding: 0 14px;
    min-width: 40px;
    background: #fafafa;
    border-left: 1px solid #e6e7e9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
